<template>
  <div class="pending-application-table">
    <el-table
      :data="tableData"
      v-loading="loading"
      border
      style="width: 100%; border-radius: 8px;"
      @selection-change="onSelectionChange"
      :row-class-name="rowClassName"
    >
      <el-table-column type="selection" width="50" />
      <el-table-column prop="applicationId" label="申请ID" width="100" align="left">
        <template #default="scope">
          <b>{{ scope.row.applicationId }}</b>
        </template>
      </el-table-column>
      <el-table-column prop="userName" label="申请人" width="140">
        <template #default="scope">
          <el-avatar size="small" style="margin-right:8px;">{{ scope.row.userName?.[0] || '?' }}</el-avatar>
          {{ scope.row.userName || '未知' }}
        </template>
      </el-table-column>
      <el-table-column prop="applyDate" label="申请日期" width="120" />
      <el-table-column prop="status" label="状态" width="120">
        <template #default="scope">
          <el-tag :type="getStatusTag(scope.row.status)" :style="statusTagStyle(scope.row.status)">
            {{ getStatusLabel(scope.row.status) }}
          </el-tag>
        </template>
      </el-table-column>
      <el-table-column label="操作" width="180">
        <template #default="scope">
          <el-button type="success" icon="el-icon-check" size="small" @click.stop="approve(scope.row, true)">通过</el-button>
          <el-button type="danger" icon="el-icon-close" size="small" @click.stop="approve(scope.row, false)">驳回</el-button>
        </template>
      </el-table-column>
    </el-table>
    <div class="table-pagination">
      <el-pagination
        background
        layout="prev, pager, next, jumper, ->, total"
        :total="total"
        :page-size="pageSize"
        :current-page="pageNum"
        @current-change="onPageChange"
      />
      <el-button
        v-if="multipleSelection.length > 0"
        type="primary"
        style="margin-left: 16px;"
        @click="batchApprove(true)"
      >批量通过</el-button>
      <el-button
        v-if="multipleSelection.length > 0"
        type="danger"
        style="margin-left: 8px;"
        @click="batchApprove(false)"
      >批量驳回</el-button>
    </div>
  </div>
</template>

<script setup lang="ts">
import { ref, onMounted } from 'vue'
import { ElMessage, ElMessageBox } from 'element-plus'
import { getPendingApplications } from '@/api/classroom'
import { getStatusLabel, getStatusTag } from '@/utils/statusMap'
import { approveApplication, batchApproveApplications } from '@/api/classroom'

const tableData = ref([])
const total = ref(0)
const pageNum = ref(1)
const pageSize = ref(10)
const loading = ref(false)
const multipleSelection = ref<any[]>([])

// 假设有用户ID和角色
const userId = 1
const userRole = 'ADMIN' // 或 'TEACHER'

function fetchData() {
  loading.value = true
  getPendingApplications({
    userId,
    userRole
  }).then(res => {
    tableData.value = res.data || []
    total.value = Array.isArray(res.data) ? res.data.length : 0
  }).catch(() => {
    ElMessage.error('获取待审批列表失败')
  }).finally(() => {
    loading.value = false
  })
}

function onPageChange(val: number) {
  pageNum.value = val
  fetchData()
}

function onSelectionChange(val: any[]) {
  multipleSelection.value = val
}

function statusTagStyle(status: string) {
  if (status === 'REVIEWING') return { background: 'linear-gradient(90deg,#165DFF,#6B92F2)', color: '#fff', border: 'none' }
  if (status === 'APPROVED') return { background: 'linear-gradient(90deg,#36D399,#10B981)', color: '#fff', border: 'none' }
  if (status === 'REJECTED') return { background: 'linear-gradient(90deg,#F87272,#EF4444)', color: '#fff', border: 'none' }
  return {}
}

function approve(row: any, isApprove: boolean) {
  ElMessageBox.prompt('请输入审批意见', isApprove ? '通过审批' : '驳回审批', {
    confirmButtonText: isApprove ? '通过' : '驳回',
    cancelButtonText: '取消',
    inputPlaceholder: '审批意见',
    inputType: 'textarea',
  }).then(({ value }) => {
    approveApplication(row.applicationId, {
      approverId: userId,
      approvalStatus: isApprove ? 'APPROVED' : 'REJECTED',
      approvalOpinion: value
    }).then(() => {
      ElMessage.success(isApprove ? '审批通过' : '已驳回')
      fetchData()
    }).catch(() => {
      ElMessage.error('审批失败')
    })
  })
}

function batchApprove(isApprove: boolean) {
  ElMessageBox.prompt('请输入批量审批意见', isApprove ? '批量通过' : '批量驳回', {
    confirmButtonText: isApprove ? '通过' : '驳回',
    cancelButtonText: '取消',
    inputPlaceholder: '审批意见',
    inputType: 'textarea',
  }).then(({ value }) => {
    const ids = multipleSelection.value.map(item => item.applicationId)
    batchApproveApplications({
      applicationIds: ids,
      approverId: userId,
      approvalStatus: isApprove ? 'APPROVED' : 'REJECTED',
      approvalOpinion: value
    }).then(() => {
      ElMessage.success(isApprove ? '批量审批通过' : '批量驳回成功')
      fetchData()
    }).catch(() => {
      ElMessage.error('批量审批失败')
    })
  })
}

function rowClassName() {
  return 'pending-application-row'
}

onMounted(fetchData)
</script>

<style scoped>
.pending-application-table {
  background: #fff;
  border-radius: 8px;
  padding: 0 0 16px 0;
}
.table-pagination {
  margin-top: 16px;
  text-align: right;
}
.pending-application-row:hover {
  background: #F0F2F6 !important;
}
</style> 